<template>
  <div style="overflow: auto;position: inherit">
    <div class="electricity_div" v-loading="load" element-loading-text="loading">
      <img class="pos_mgu" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_mgu" :subtitle="subtitle" :energy_value="mgu_value" :title="mgu_title" :units="units"/>

      <img class="pos_sema" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_sema" :subtitle="subtitle" :energy_value="sema_value" :title="sema_title" :units="units"/>

      <img class="pos_machine" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_machine" :subtitle="subtitle" :energy_value="machine_value" :title="machine_title"
                  :units="units"/>

      <img class="pos_plat1" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_plat1" :subtitle="subtitle" :energy_value="plat1_value" :title="plat1_title"
                  :units="units"/>

      <img class="pos_c12" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_c12" :subtitle="subtitle" :energy_value="c12_value" :title="c12_title" :units="units"/>

      <img class="pos_canteen" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_canteen" :subtitle="subtitle" :energy_value="canteen_value" :title="canteen_title"
                  :units="units"/>

      <img class="pos_plat2" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_plat2" :subtitle="subtitle" :energy_value="plat2_value" :title="plat2_title"
                  :units="units"/>

      <img class="pos_assembly" src="../../assets/icon_location.png">
      <EnergyGrid class="grid_assembly" :subtitle="subtitle" :energy_value="assembly_value" :title="assembly_title"
                  :units="units"/>
    </div>
  </div>
</template>

<script>
import EnergyGrid from '../../components/EnergyGrid'
import { findTodayTotal } from '../../api/tenergy'
export default {
  name: 'GasAndAir',
  components: { EnergyGrid },
  data () {
    return {
      load: true,
      subtitle: 'Day Gas Consumption:',
      units: 'm³',
      mgu_title: 'Gas for MGU Bolier',
      sema_title: 'SEMA Compressor Air',
      machine_title: 'Machining Compressor Air',
      plat1_title: 'Gas for Plating Boiler 1',
      c12_title: 'C12 Compressor Air',
      canteen_title: 'Gas for Canteen',
      plat2_title: 'Gas for Plating Boiler 2',
      assembly_title: 'Assembly Compressor Air',

      mgu_value: 12432.01,
      sema_value: 785645.23,
      machine_value: 12341.78,
      plat1_value: 4523.45,
      c12_value: 12432.01,
      canteen_value: 785645.23,
      plat2_value: 12341.78,
      assembly_value: 4523.45
    }
  },
  mounted () {
    this.requestTodayTotal()
  },
  methods: {
    async requestTodayTotal () {
      try {
        const res = await findTodayTotal()
        console.log(res)
        let data = res.data
        for (let i in data) {
          switch (data[i].deviceName) {
            case 'MGU Boiler':
              this.mgu_value = data[i].todayValue
              break
            case 'SEMA Compressor Air':
              this.sema_value = data[i].todayValue
              break
            case 'Machining Compressor Air':
              this.machine_value = data[i].todayValue
              break
            case 'Plating Boiler 1':
              this.plat1_value = data[i].todayValue
              break
            case 'C12 Compressor Air':
              this.c12_value = data[i].todayValue
              break
            case 'Canteen Gas':
              this.canteen_value = data[i].todayValue
              break
            case 'Plating Boiler 2':
              this.plat2_value = data[i].todayValue
              break
            case 'Assembly Compressor Air':
              this.assembly_value = data[i].todayValue
              break
          }
        }
        this.load = false
      } catch (error) {
        console.log(error)
      }
    }
  }
}
</script>

<style lang="less">
.electricity_div {
    width: 1800px;
    height: 900px;
    background-repeat: no-repeat;
    background-image: url("../../assets/bg_pic.jpg");
    background-size: 100% auto;
    position: relative;
  }

  .pos_mgu {
    position: absolute;
    left: 640px;
    top: 200px;
  }

  .grid_mgu {
    position: absolute;
    left: 330px;
    top: 150px;
  }

  .pos_sema {
    position: absolute;
    left: 540px;
    top: 350px;
  }

  .grid_sema {
    position: absolute;
    left: 220px;
    top: 330px;
  }

  .pos_machine {
    position: absolute;
    left: 730px;
    top: 420px;
  }

  .grid_machine {
    position: absolute;
    left: 410px;
    top: 430px;
  }

  .pos_plat1 {
    position: absolute;
    left: 880px;
    top: 290px;
  }

  .grid_plat1 {
    position: absolute;
    left: 570px;
    top: 260px;
  }

  .pos_c12 {
    position: absolute;
    left: 950px;
    top: 340px;
  }

  .grid_c12 {
    position: absolute;
    left: 630px;
    top: 340px;
  }

  .pos_canteen {
    position: absolute;
    left: 1080px;
    top: 440px;
  }

  .grid_canteen {
    position: absolute;
    left: 880px;
    top: 470px;
  }

  .pos_plat2 {
    position: absolute;
    left: 980px;
    top: 290px;
  }

  .grid_plat2 {
    position: absolute;
    left: 1010px;
    top: 260px;
  }

  .pos_assembly {
    position: absolute;
    left: 1100px;
    top: 360px;
  }

  .grid_assembly {
    position: absolute;
    left: 1130px;
    top: 370px;
  }
</style>
